Эпизоды
Intro
Intro
0:00
Intro
0:00
Environment setup
Environment setup
2:16
Environment setup
2:16
Auth Setup
Auth Setup
8:18
Auth Setup
8:18
Auth UI
Auth UI
15:30
Auth UI
15:30
MongoDB, Prisma setup
MongoDB, Prisma setup
58:53
MongoDB, Prisma setup
58:53
NextAuth Setup
NextAuth Setup
1:17:54
NextAuth Setup
1:17:54
Register Functionality
Register Functionality
1:32:20
Register Functionality
1:32:20
Login Functionality and Social Login (Google and Github)
Login Functionality and Social Login (Google and Github)
1:40:23
Sidebar, Navigation and Layout
Sidebar, Navigation and Layout
1:57:42
Sidebar, Navigation and Layout
1:57:42
Users screen and Conversations screen, Conversation Creation
Users screen and Conversations screen, Conversation Creation
2:58:39
Messages creation, Message Image upload
Messages creation, Message Image upload
4:12:34
Profile Drawer
Profile Drawer
5:29:12
Profile Drawer
5:29:12
Settings functionality, Modal component
Settings functionality, Modal component
6:01:20
Group chat functionality, Image Modal, Loading states
Group chat functionality, Image Modal, Loading states
6:53:39
Real time messages, conversations, read receipts and active status with Pusher
Real time messages, conversations, read receipts and active status with Pusher
7:43:15
Deploy to Vercel, fix Google and Github social sign in in deployment
Deploy to Vercel, fix Google and Github social sign in in deployment
8:44:03
Описание
Эпизоды
Избранный плейлист
Learn Next & React and get Hired!
Code With Antonio
Расшифровка видео
Расшифровка позволяет быстро находить в видео нужную информацию.
Code With Antonio
116 тыс. подписчиков
 - YouTube_files/hqdefault.jpg)
 - YouTube_files/mqdefault.jpg)
 - YouTube_files/hqdefault(1).jpg)
 - YouTube_files/hqdefault(2).jpg)
 - YouTube_files/hqdefault(3).jpg)
 - YouTube_files/hqdefault(4).jpg)
 - YouTube_files/hqdefault(5).jpg)
 - YouTube_files/hqdefault(6).jpg)
 - YouTube_files/hqdefault(7).jpg)
 - YouTube_files/hqdefault(8).jpg)
 - YouTube_files/hqdefault(9).jpg)
 - YouTube_files/hqdefault(10).jpg)
 - YouTube_files/hqdefault(11).jpg)
 - YouTube_files/hqdefault(12).jpg)
 - YouTube_files/hqdefault(13).jpg)
 - YouTube_files/hqdefault(14).jpg)
 - YouTube_files/hqdefault(15).jpg)
 - YouTube_files/hqdefault(16).jpg)
 - YouTube_files/hqdefault(17).jpg)
 - YouTube_files/hqdefault(18).jpg)
 - YouTube_files/hqdefault(19).jpg)
 - YouTube_files/hqdefault(20).jpg)
 - YouTube_files/hqdefault(21).jpg)
 - YouTube_files/hqdefault(22).jpg)
 - YouTube_files/hqdefault(23).jpg)
 - YouTube_files/hqdefault(24).jpg)
 - YouTube_files/hqdefault(25).jpg)
 - YouTube_files/hqdefault(26).jpg)
 - YouTube_files/hqdefault(27).jpg)
 - YouTube_files/hqdefault(28).jpg)
 - YouTube_files/hqdefault(29).jpg)
 - YouTube_files/hqdefault(30).jpg)
 - YouTube_files/hqdefault(31).jpg)
 - YouTube_files/hqdefault(32).jpg)
 - YouTube_files/hqdefault(33).jpg)
 - YouTube_files/hqdefault(34).jpg)
 - YouTube_files/hqdefault(35).jpg)
 - YouTube_files/hqdefault(36).jpg)
 - YouTube_files/hqdefault(37).jpg)
 - YouTube_files/hqdefault(38).jpg)
 - YouTube_files/hqdefault(39).jpg)
 - YouTube_files/hqdefault(40).jpg)
 - YouTube_files/hqdefault(41).jpg)
 - YouTube_files/hqdefault(42).jpg)
 - YouTube_files/hqdefault(43).jpg)
 - YouTube_files/hqdefault(44).jpg)
 - YouTube_files/hqdefault(45).jpg)
 - YouTube_files/hqdefault(46).jpg)
 - YouTube_files/hqdefault(47).jpg)
 - YouTube_files/hqdefault(48).jpg)
 - YouTube_files/hqdefault(49).jpg)
 - YouTube_files/hqdefault(50).jpg)
 - YouTube_files/hqdefault(51).jpg)
 - YouTube_files/hqdefault(52).jpg)
 - YouTube_files/hqdefault(53).jpg)
 - YouTube_files/hqdefault(54).jpg)
 - YouTube_files/hqdefault(55).jpg)
 - YouTube_files/hqdefault(56).jpg)
 - YouTube_files/hqdefault(57).jpg)
 - YouTube_files/hqdefault(58).jpg)
 - YouTube_files/hqdefault(59).jpg)
 - YouTube_files/hqdefault(60).jpg)
Key Takeaways for quick navigation:
02:26
You can initialize a new Next.js 13 project with Tailwind CSS support by running the `npx create-next-app` command with the `--typescript --tailwind` flags.
16:42
️ Use state variables and hooks like `useState` and `useCallback` to manage the state and logic of your components effectively.
19:14
Implement form handling and validation using the `useForm` hook from `react-hook-form` to create interactive and responsive forms.
23:50
Style your components by applying CSS classes, and use the Tailwind CSS framework to achieve a sleek and responsive design for your application.
29:24
️ Define TypeScript interfaces to specify the props that your components accept, making your code more readable and maintainable.
48:04
Structure your UI elements using nested divs and CSS classes to achieve desired layouts and styles in your React application.
50:19
Creating a new component for social buttons and importing React Icons.
01:03:09
Establishing relationships between User and Conversation, User and Account, Conversation and Message, and Message and User.
01:15:03
Setting up relationships for sender and conversation IDs in the Message model for better data organization.
01:16:09
️ Managing user accounts and social logins by clearing user accounts and performing a hard reload to avoid conflicts during social login setup.
02:02:46
️ Create a middleware to protect routes and automatically redirect unauthorized users to the login screen.
02:26:34
An action called `getUsers` is created to fetch a list of users excluding the currently logged-in user.
03:15:12
️ The tutorial creates an action to retrieve conversations, ordering them by the latest message and populating related data.
03:38:35
Special types, like `full message type` and `full conversation type`, are created to handle complex data structures in the app.
03:48:00
Creating a custom hook, `useOtherUser`, to find the other user in a conversation.
04:02:44
The code is handling the display of messages and conversation details in a messaging app interface.
04:25:47
Preparing the interface for mobile screens and adding a back button for navigation in the header.
04:29:22
️
️ Implement a profile drawer that opens when clicking the ellipsis menu icon. Configure its appearance with class names, size, and behavior.
04:31:11
Inside the "body" component, set up initial styling by applying CSS classes like "flex-1 overflow-y-auto" to enable scrolling.
04:32:19
In the "form" component, set up an "onSubmit" function to handle sending messages. Use the "useForm" hook and configure form fields, including message input.
04:33:42
Style the "message input" component by applying CSS classes for text, padding, background color, and more to achieve the desired appearance.
04:34:49
️ Import icons like "hi photo" and "hi paper airplane" from the React Icons library to use in your components.
04:37:43
Verify the existence of the current user and their necessary details (e.g., ID and email) before processing the message creation.
04:38:10
Parse the JSON data from the request body and extract the message content, image (if any), and conversation ID.
04:39:06
Prepare the updated conversation data for future use (e.g., real-time updates with Pusher), but do not return it in the API response.
04:43:06
Handle errors and responses from the API by logging errors, returning appropriate HTTP status codes, and returning the new message as JSON.
04:43:36
Set up the foundation for real-time updates with Pusher, which will be integrated in the future to provide users with real-time messaging capabilities.
04:44:08
Create a serverless API route to handle message creation and ensure that necessary data is extracted, validated, and processed.
04:45:39
Check for missing user information (ID and email) to ensure the request is authorized. Return a 401 status code for unauthorized requests.
04:50:19
Implemented Cloudinary image upload functionality in the message form.
04:56:37
To create a modal dialog in a Next.js project, wrap the content within a ` - YouTube_files/emoji_u1f605.png)
 - YouTube_files/emoji_u2764.png)
 - YouTube_files/hq720_live.jpg)
 - YouTube_files/hq720.jpg)
 - YouTube_files/hq720(1).jpg)
 - YouTube_files/hqdefault(61).jpg)
 - YouTube_files/oar2.jpg)
 - YouTube_files/oar2(1).jpg)
 - YouTube_files/oar2(2).jpg)